<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title th:text="${article.title}">文章-个人博客-【心路历程】请不要在设计这条路上徘徊啦</title>
<meta name="keywords" content="前端模板">
<meta name="description" content="前端模板">
  <link rel="stylesheet" href="/blog/dist/semantic/semantic.css">
  <link rel="stylesheet" href="/blog/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="/blog/css/global.css"/>
<link rel="stylesheet" href="/blog/css/animate.css"/>
<link rel="stylesheet" href="/blog/css/typo.css">
<link rel="stylesheet" href="/blog/css/my.css">
<link rel="stylesheet" href="/blog/lib/prism/prism.css">
<link rel="stylesheet" href="/blog/lib/tocbot/tocbot.css">

</head>
<body>

<div class="layui-header header" th:replace="blog/fragment::nav(2)"></div>

<div class="layui-container container animated fadeIn" id="waypoint">
  <div class="layui-row layui-col-space20">
    <div class="layui-col-md12">
      <!--标题-->
      <span class="layui-breadcrumb">
          <a href="/index/1" style="font-size: 18px">首页</a>
          <a href="/articleList/1" style="font-size: 18px">文章</a>
          <a><cite style="font-size: 18px" th:text="${article.title}">【心路历程】请不要在设计这条路上徘徊啦</cite></a>
      </span>
      <hr class="layui-bg-red">
      <!--文章-->
      <div class="content">
        <!--文章标题-->
        <h2 class="c_titile" th:text="${article.title}">【心路历程】请不要在设计这条路上徘徊啦</h2>
        <p class="box_c autor">
          <span class="dtime f_l" th:text="${#dates.format(article.createTime,'yyyy-MM-dd')}">2014-02-19</span>
          <span class="viewnum f_r">浏览（<a href="javascript:;" th:text="${article.totalView}">459</a>）</span>
          <span class="pingl f_r">评论（<a href="javascript:void(0)" onclick="reply(this)" th:text="${article.commentNum}">30</a>）</span>
          <a class="ui teal tag label">原创</a>
        </p>
        <!--文章内容-->
        <div class="detail-body typo typo-selection js-toc-content" th:utext="${article.html}">
          博客内容
        </div>
        <!--中间内容留言区域开始-->
        <div id="comment-container" class="ui bottom attached segment">
          <!--中间内容留言区域列表-->
          <div th:fragment="commentList">
            <div class="ui teal segment">
              <div class="ui comments">
                <h3 class="ui dividing">评论区</h3>
                <div class="comment" th:each="comment:${comments}">
                  <a class="avatar">
                    <img src="/blog/images/user2.jpg">
                  </a>
                  <div class="content">
                    <a class="author" th:text="${comment.username}">Elliot Fu</a>
                    <div class="ui blue Mini horizontal label" th:if="${comment.createBy} == 1">博主</div>
                    <div class="metadata">
                      <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">昨天上午12:30</span>
                    </div>
                    <div class="text">
                      <p th:text="${comment.content}">這對我的研究是非常有用.謝謝!</p>
                    </div>
                    <div class="actions">
                      <a class="reply" data-commentId="1" data-commentNickname="Matt"
                         th:attr="data-commentId=${comment.id},data-commentNickname=${comment.username}" onclick="reply(this)">回复</a>
                      <a class="reply" data-commentId="1" data-commentNickname="Matt" th:if="${comment.username} == ${user}"
                         th:attr="data-commentId=${comment.id},data-commentNickname=${comment.username}" onclick="remove(this)">删除</a>
                    </div>
                  </div>
                  <div class="comments" th:if="${comment.replyNum}>0">
                    <div class="comment" th:each="reply:${comment.replyComments}">
                      <a class="avatar">
                        <img src="/blog/images/user3.jpg">
                      </a>
                      <div class="content">
                        <a class="author"><span th:text="${reply.username}">Jenny Hess</span></a>
                        <div class="ui blue Mini horizontal label" th:if="${reply.createBy} == 1">博主</div>
                        <span>&nbsp;&nbsp;回复@&nbsp;</span>
                        <a class="author"><span th:text="${reply.parentUserName}">小白</span></a>
                        <div class="metadata">
                          <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">刚刚</span>
                        </div>
                        <div class="text" th:text="${reply.content}">艾略特你永远是多么正确 :) </div>
                        <div class="actions">
                          <a class="reply" data-commentId="1" data-commentNickname="Matt"
                             th:attr="data-commentId=${reply.id},data-commentNickname=${reply.username}" onclick="reply(this)">回复</a>
                          <a class="reply" data-commentId="1" data-commentNickname="Matt" th:if="${reply.username} == ${user}"
                             th:attr="data-commentId=${reply.id},data-commentNickname=${reply.username}" onclick="remove(this)">删除</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <form id="comment-form" class="ui form layui-form" name="postComment">
          <p id="blogId" style="display: none" th:text="${article.id}"></p>
          <input style="display: none" id="parentCommentId">
          <div class="field layui-form-item">
            <textarea name="content" lay-verify="required|isLogin"  placeholder="说两句吧...."></textarea>
          </div>
          <div class="field m-margin-bottom-small m-mobile-wide">
            <button lay-submit lay-filter="postComment" class="ui teal button m-mobile-wide">
              <i class="edit icon"></i>发布</button>
          </div>
        </form>
        <!--中间内容留言区域结束-->
      </div>
    </div>
  </div>
</div>

  <!-- 右边小工具条开始  ---------------->
  <div id="toolbar" class="m-padded-all m-fixed m-right-top" style="display: none;margin-top: 50px">
    <div class="ui vertical icon buttons ">
      <button type="button" class="ui toc-button teal button">文章目录</button>
      <a href="javascript:;" onclick="reply()" class="ui teal button">留言</a>

      <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i> 回到顶部</div>
    </div>
  </div>

  <div class="ui toc-comtainer flowing popup transition hidden" style="width: 300px !important;">
    <ol class="js-toc">

    </ol>
  </div>


  <!-- 右边小工具条结束  ---------------->

<div class="footer" th:replace="blog/fragment::footer"></div>

  <script src="/blog/dist/jquery/jquery-3.4.1.min.js"></script>
  <script src="/blog/dist/semantic/semantic.min.js"></script>
  <script src="/blog/js/global.js"></script>
  <script src="/blog/layui/layui.js" type="text/javascript"></script>
  <script src="/blog/js/index/index.js" type="text/javascript"></script>

  <script src="/blog/lib/scrollTo/scrollTo.min.js"></script>
  <script src="/blog/lib/prism/prism.js"></script>
  <script src="/blog/lib/tocbot/tocbot.js"></script>
  <script src="/blog/lib/qrcode/qrcode.min.js"></script>
  <script src="/blog/lib/waypoints/waypoints.min.js"></script>

  <script>
    var blogId = $("#blogId").text();
    $(function () {
      $("#comment-container").load("/comments/"+blogId);
    });

    function reply(obj) {
      if (obj == null || obj.getAttribute("data-commentId") == null) {
        //跳转到评论区，顶级评论
        $("[name='content']").attr("placeholder", "说两句吧....").focus();
      } else {
        //回复评论
        var commentId = obj.getAttribute("data-commentId");
        var commentNickname = obj.getAttribute("data-commentNickname");
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[id='parentCommentId']").val(commentId);
      }
      $(window).scrollTo($('#comment-form'),500);
    };

    function clearContent() {
      $("[name='content']").attr("placeholder", "说两句吧....").val('');
      $("[id='parentCommentId']").val('');
    }

    function remove(obj) {
      var commentId = obj.getAttribute("data-commentId");
      $.ajax({
        url:"/comments/removeComment" , // 请求路径
        type:"post" , //请求方式
        contentType:"application/json",
        dataType:"json",//设置接受到的响应数据的格式
        data: JSON.stringify({
          'id':commentId
        }),
        success:function (data) {
          if (data.code == 200) {
            $("#comment-container").load("/comments/"+blogId);
            clearContent();
          }
        },//响应成功后的回调函数
        error:function () {
          alert("出错啦...")
        },//表示如果请求响应出现错误，会执行的回调函数
      });
    }

    layui.use('form', function(){
      var form = layui.form;
      form.on('submit(postComment)', function(data){
        $.ajax({
          url:"/comments/postComment" , // 请求路径
          type:"post" , //请求方式
          data: JSON.stringify({
            "replyTo": $('#parentCommentId').val(),
            "content": data.field.content,
            "articleId": $('#blogId').text()
          }),
          contentType:"application/json",
          dataType:"json",//设置接受到的响应数据的格式
          success:function (data) {
            if (data.code == 200) {
              $("#comment-container").load("/comments/"+blogId);
              clearContent();
            }
          },//响应成功后的回调函数
          error:function () {
            alert("出错啦...")
          },//表示如果请求响应出现错误，会执行的回调函数
        });
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
      });
      form.verify({
        isLogin: function(value, item){ //value：表单的值、item：表单的DOM对象
          var a = document.getElementById('user');
          if (a == null){
            return "请先登录";
          }
        }
      });
    });

    $('.m-menu.m-toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('#m-pay-button-id').popup({
      popup : $('.m-pay-q.popup'),
      on : 'click',
      position: 'bottom center'
    });

    /* 初始化文章目录 */
    tocbot.init({
      // 指定在哪放置这个文章目录
      tocSelector: '.js-toc',
      // 需要指定为哪个里面的内容生成目录
      contentSelector: '.js-toc-content',
      // 指定生成的级别
      headingSelector: 'h1, h2, h3, h4',
      // For headings inside relative or absolute positioned containers within content.
      hasInnerContainers: true
    });

    $('.toc-button').popup({
      popup : $('.toc-comtainer.popup'),
      on : 'click',
      position: 'left center'
    });

    $('#toTop-button').click(function() {
      $(window).scrollTo(0,800);
    });

    var waypoint = new Waypoint({
      element: document.getElementById('waypoint'),
      handler: function(direction) {
        if(direction == 'down') {
          $('#toolbar').show(400);
        } else {
          $('#toolbar').hide(400);
        }
      }
    })

  </script>
</body>
</html>
